<template>
  <div class="global">

    <div class="header" v-if="showhead">

      <div class="headerbody">
        <div class="leftlogo">
          <div class="letterlist"><span v-for="item in titlearray" :style="{ color: item.color }" class="letter">{{
            item.letter }}</span>
          </div>
          <div>

            <div class="menulist">
              <div class="menu" @click="index()" :class="activeid == 0 ? 'active' : ''">首页</div>
              <el-popover placement="bottom" v-for="item, index in boardlist">
                <template #reference>
                  <div :class="activeid == item.boardId ? 'active menu' : 'menu'" @click="menuindex(item, index)"> {{
                    item.boardName }}</div>
                </template>
                <div style="display: flex;flex-wrap: wrap;">
                  <div :class="activeid1 == item1.boardId ? 'active subitem' : 'subitem'"
                    @click="menuindex1(item1, index)" v-for="item1 in item.children">{{ item1.boardName }}</div>
                </div>
              </el-popover>

            </div>
          </div>
        </div>
        <div class="right">
          <el-button type="primary" @click="fatie()" plain>发帖</el-button>
          <el-button type="primary" @click="search()" plain>搜索</el-button>

          <div v-if="userInfo == null" style="margin-left: 10px;">
            <el-button type="primary" @click="login()">登录</el-button>
            <el-button type="primary" @click="register()">注册</el-button>
          </div>
          <div v-else>
            <el-dropdown >

              <el-badge style="margin-right: 20px;" :value="count" v-if="count != 0" class="item">
                <el-icon :size="40">
                  <Message />

                </el-icon>

              </el-badge>
              <el-icon :size="40" v-else>
                <Message />

              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="tomessage(0)">回复我的</el-dropdown-item>
                  <el-dropdown-item @click="tomessage(1)">点赞消息</el-dropdown-item>
                  <el-dropdown-item @click="tomessage(3)">赞了我的评论</el-dropdown-item>
                  <el-dropdown-item @click="tomessage(4)">系统消息</el-dropdown-item>

                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-dropdown>
              <span class="el-dropdown-link">
                {{ userInfo.nickName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="mine">我的主页</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出</el-dropdown-item>

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div style="padding-top: 60px;">

      <router-view style="min-height: calc(100vh - 210px);"></router-view>
    </div>
    <div class="footer" style="height: 150px;"></div>
    <LoginRegister ref="loginregister"></LoginRegister>
  </div>
</template>

<script setup>

import LoginRegister from "../components/LoginRegister.vue"
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import service from "../utils/request";
import { useStore } from "vuex";
import { useRoute } from 'vue-router';
import router from "../router";
const route = useRoute();
const store = useStore();
const titlearray = ref([
  {
    letter: 'A',
    color: '#3285FF',
  },
  {
    letter: 'r',
    color: '#FB3624',
  },
  {
    letter: 'c',
    color: '#FFBA02',
  },
  {
    letter: 'b',
    color: '#3285FF',
  },
  {
    letter: 'b',
    color: '#25B24E',
  },
  {
    letter: 's',
    color: '#FD3224',
  }
])
const boardlist = ref([]);
const userInfo = ref(null)
const count = ref(0)

onMounted(() => {
  console.log(store.state.userInfo)
  getboard()
  getscroll()
  getinfo()

  if (route.params.pboardId || route.params.boardId) {
    activeid.value = Number(route.params.pboardId);

    activeid1.value = route.params.boardId;


  } else {
    activeid.value = 0
    activeid1.value = ""
  }

})
const getmessagecount = async (userInfo) => {
  const res = await service.get("/user/message", {
    params: {
      userId: userInfo.userId
    }
  })
  count.value=res.data.total
  console.log(res)
}
const index = () => {

  activeid.value = 0
  activeid1.value = ""
  router.push({
    path: "/"
  })
}
const menuindex = (item, index) => {
  activeid.value = item.boardId
  router.push({
    path: "/forum/" + item.boardId
  })
}
const activeid1 = ref();
const menuindex1 = (item, index) => {
  console.log(item)
  activeid.value = item.pboardId
  activeid1.value = item.boardId
  console.log(activeid1)

  router.push({
    path: "/forum/" + item.pboardId + "/" + item.boardId
  })
}

const logout = async () => {

  const res = await service.get("/logout");
  getinfo()
}
const getinfo = async () => {
  const res = await service.get("/getUserInfo");
  console.log(res)
  store.commit("setuserInfo", res.data)
  console.log(store.state.userInfo)
  getmessagecount(store.state.userInfo)
}
watch(() => route.params, (newvalue, oldvalue) => {
  console.log(newvalue, "new")
  if (newvalue == {}) {
    activeid1.value = ""
  } else {
    activeid1.value = newvalue.boardId
  }
})
watch(() => store.state.showLogin, (newvalue, old) => {
  console.log(newvalue)
  if (newvalue == true) {
    loginregister.value.showmodal(0)
  }

})
watch(() => store.state.userInfo, (newvalue, old) => {

  userInfo.value = newvalue

})
const login = () => {
  store.commit("setshowlogin", true)
  console.log(store.state.showLogin)
}
const register = () => {
  loginregister.value.showmodal(1)
}
const opentype = ref(-1);
const activeid = ref(0)
const isscroll = ref(0)
const loginregister = ref();
const fatie = () => {
  console.log(loginregister)
  if (store.state.userInfo == null) {
    loginregister.value.showmodal(0)
  } else {
    router.push({
      path: "/add"
    })
  }

}
const initScroll = () => {
  let scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  return scroll
}
const showhead = ref(true);


const getscroll = () => {
  let globalscroll = initScroll();

  window.addEventListener('scroll', () => {

    let currentscroll = initScroll();
    console.log(currentscroll, "cur")
    console.log(globalscroll, "glo")
    if (currentscroll > globalscroll) {
      showhead.value = false;

    } else {
      showhead.value = true
    }
  })
}
const getboard = async () => {
  const res = await service.get("/board/loadBoard");

  // .Request({
  //   url: "/board/loadBoard"
  // })
  boardlist.value = res.data


  console.log(res)
}
const mine = () => {
  router.push({
    path: "/my",
    query: {
      userId: store.state.userInfo.userId
    }
  })
}
const tomessage=(i)=>{
  router.push({
    path:"/message",
    query:{
      index:i
    }
  })

}
const search = () => {
  router.push({
    path: "/search"
  })
}
</script>

<style scoped>
.header {
  width: 100%;

  background: #fff;
  position: fixed;
  top: 0px;
  z-index: 1000;

}

.active {
  color: #007fff !important;
}

.leftlogo {
  display: flex;

}

.right {
  height: 100%;
  display: flex;
  align-items: center;
}

.global {
  width: 100%;

  background: #f7f7f7;

}

.headerbody {
  width: 1300px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.letter {
  font-size: 30px;
}

.letterlist {
  margin-right: 20px;

}

.menulist {
  display: flex;
  align-items: center;
  height: 100%;
}

.menu {
  color: #61666d;
  padding: 0px 20px;
  box-sizing: border-box;
  cursor: pointer;
}

.subitem {
  padding: 0 10px;
  border-radius: 20px;
  cursor: pointer;
  margin-right: 10px;
  text-decoration: none;
  background: rgb(231, 230, 230);
  border: 1px solid #ddd;
  margin-top: 10px;
}
</style>